<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>07_事件修饰符</title>
  <style>
    box1 {
      width: 100px;
      color: #47f8;
      height: 20px;
      padding: 15px;
      box-shadow: 0 0 0 10px;
    }
  </style>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <!-- prevent 阻止表单 a 链接类元素的默认行为 -->
    <a @click.prevent="skipBD" href="http://www.baidu.com">点击去百度</a>
    <hr>

    <!-- stop 阻止冒泡行为 -->
    <div class="box1" @click.stop="inhibit">
      <button @click.stop="inhibit">点击阻止默认冒泡行为</button>
    </div>
    <hr>

    <!-- once 事件只触发一次 -->
    <button @click.once="getone">点击触发一次</button>
    <hr>

    <!-- 联合类型 -->
    <button @click.prevent.stop.once="joint">联合类型的事件</button>
  </div>
</body>

<script type="text/javascript">
  //阻止 vue 在启动时生成生产提示。
  Vue.config.productionTip = false;
  new Vue({
    el: '#demo',
    methods: {
      skipBD(e) {
        console.log(111);
      },
      inhibit() {
        console.log(2222);
      },
      getone() {
        console.log(33333);
      },
      joint() {
        console.log(444);
      }
    }
  })
</script>

</html>